<template>
  <div class="user-box">
    <img
      class="head"
      src="https://tse4-mm.cn.bing.net/th/id/OIP-C.ReJNwyR851ney_efDnzGVQHaHa?w=167&h=180&c=7&r=0&o=7&cb=12&dpr=1.5&pid=1.7&rm=3"
      alt=""
    />
    <div class="info">
      <div class="item">
        <span>姓名:</span>
        <input type="text" v-model="name" />
      </div>
      <div class="item">
        <span>电话:</span>
        <input type="text" v-model="phone" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 拦截：从该组件标签在使用时，通过自定义属性绑定的名称，获取传递的数据
  props: ["user"],
  computed: {
    name: {
      get() {
        return this.user.name;
      },
      set(name) {
        console.log(name);
        // 更新user对象的name
        this.$emit("update-name", name);
      },
    },
    phone: {
      get() {
        return this.user.phone;
      },
      set(phone) {
        console.log(phone);
        // 更新user对象phone
        this.$emit("update-phone", phone);
      },
    },
  },
};
</script>

<style>
.user-box {
  display: inline-block;
  margin: 6px;
  overflow: hidden;
  width: 240px;
  height: 240px;
  border-radius: 8px;
  box-shadow: 0 0 6px 0 #999;
}
.user-box .head {
  width: 240px;
  height: 160px;
  overflow: hidden;
  /* 图片裁剪 */
  object-fit: cover;
}
.info {
  text-align: left;
}
.item {
  display: flex;
  flex-flow: row nowrap;
}
</style>
